import { Base } from '../common/utils/base.js';

Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		//url请求地址
		url: {
			type: String,
			value: ""
		},
		//请求类型:get,post
		type: {
			type: String,
			value: "get"
		},
		//请求参数
		params: {
			type: Object,
			value: {}
		},
		//图标
		imgPath: {
			type: String,
			value: ""
		},
		//图标颜色
		color: {
			type: String,
			value: "#FB8C00"
		},
		//提示信息
		title: {
			type: String,
			value: "轻松摇一摇"
		},
		//搜索提示信息
		searchDesc: {
			type: String,
			value: "正在搜索同意时刻摇晃手机的人"
		},
		//背景色
		background: {
			type: String,
			value: "#F5F5F5"
		},

	},
	ready: function () {
		var context = wx.createContext()
		context.rect(5, 5, 25, 15)
		context.stroke()
		// context.drawImage()
		wx.drawCanvas({
			canvasId: 'myCanvas',
			actions: context.getActions()
		});


		this.initAnimation();
		//重力加速度
		wx.onAccelerometerChange((res)=> {
			if (res.x > .7 && res.y > .7) {
				// wx.showToast({title: '摇一摇成功',icon: 'success',duration: 2000})

				//开始执行摇一摇
				this.startAnimation();
			}
		});

		//获取系统信息 
		wx.getSystemInfo({
			success:  (res)=> {
				this.setData({
					winWidth: res.windowWidth,
					winHeight: res.windowHeight
				});
			}
		});

		if(this.data.imgPath!=""){
			wx.downloadFile({
				url: this.data.imgPath,
				success: function (res) {
					console.log(res);
				}, fail: function (err) {
	
				}
			})
		}
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		hasResutl: -1,
		bar_state: 0,
		winWidth: 0,
		winHeight: 0,
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		initAnimation: function () {
			//实例化一个动画
			this.animation1 = wx.createAnimation({
				// 动画持续时间，单位ms，默认值 400
				duration: 400,
				/**
				* http://cubic-bezier.com/#0,0,.58,1 
				* linear 动画一直较为均匀
				* ease 从匀速到加速在到匀速
				* ease-in 缓慢到匀速
				* ease-in-out 从缓慢到匀速再到缓慢
				* 
				* http://www.tuicool.com/articles/neqMVr
				* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
				* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
				*/
				timingFunction: 'ease',
				// 延迟多长时间开始
				// delay: 100,
				/**
				* 以什么为基点做动画 效果自己演示
				* left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
				* top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
				*/
				transformOrigin: 'left top 0',
				success: function (res) {
					console.log(res)
	
				}
			})
			//实例化一个动画
			this.animation2 = wx.createAnimation({
				// 动画持续时间，单位ms，默认值 400
				duration: 400,
				/**
				* http://cubic-bezier.com/#0,0,.58,1 
				* linear 动画一直较为均匀
				* ease 从匀速到加速在到匀速
				* ease-in 缓慢到匀速
				* ease-in-out 从缓慢到匀速再到缓慢
				* 
				* http://www.tuicool.com/articles/neqMVr
				* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
				* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
				*/
				timingFunction: 'ease',
				// 延迟多长时间开始
				// delay: 100,
				/**
				* 以什么为基点做动画 效果自己演示
				* left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
				* top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
				*/
				transformOrigin: 'left top 0',
				success: function (res) {
					console.log(res)
				}
			})
		},
		/**
		*位移
		*/
		startAnimation: function () {
			//x轴位移100px
			var h1 = "35%";
			var h2 = "65%";
			if (this.data.bar_state == 1) {
				h1 = "40%";
				h2 = "40%";
				setTimeout(()=> {
					this.setData({
						//输出动画
						bar_state: 0,
						hasResutl: 0
					})
					setTimeout(()=> {
						this.setData({
							hasResutl: 1
						})
					}, 4000)
				}, 400)
			} else {
				h1 = "25%";
				h2 = "55%";
				this.setData({
					bar_state: 1
				})
				setTimeout(()=> {
					this.startAnimation();
					this.loadData();

				}, 600)
			}
			this.animation1.height(h1).step()
			this.animation2.top(h2).step()
			this.setData({
				//输出动画
				animation1: this.animation1.export(),
				animation2: this.animation2.export()
			});


		},
		//加载数据
		loadData(){
			var params = {};
			params = this.data.params;

			//get方式请求
			if (this.data.type == 'get') {
				//转成get方式传值?id=1&name=raymond
				params = Base.parseParams(params);
				var url = this.data.url + params
				var data = {};
			} else {
				//post方式请求
				var url = this.data.url;
				var data = params;
			}

			Base.request({
				url: url,
				method: this.data.type,
				data: data,
				success: (res) => {
					//数据传回去
					this.triggerEvent("resultData", {data: res});
				}
			});

		}
	
	}
})
